import { motion } from "motion/react";
import { useEffect, useState } from "react";

interface CursorProps {
  isBlinking: boolean;
}

export function Cursor({ isBlinking }: CursorProps) {
  const [isVisible, setIsVisible] = useState(true);
  // const [blinking, setBlinking] = useState(isBlinking);

  useEffect(() => {
    const cursorInterval = setInterval(() => {
      setIsVisible((prev) => !prev);
    }, 500); // 光标闪烁间隔时间

    return () => clearInterval(cursorInterval);
  }, []);

  if (isBlinking) {
    return (
      <motion.span
        className={`ml-1 ${isVisible ? "visible" : "invisible"}`}
        initial={{ opacity: 1 }}
        animate={{ opacity: isVisible ? 1 : 0 }}
        transition={{ duration: 0.2 }}
      >|</motion.span>
    );
  } else {
    return (
      <span className="ml-1">|</span>
    );
  }
}